import {
    MenuFoldOutlined,
    MenuUnfoldOutlined,
    DownOutlined,
    SmileOutlined,
    UserOutlined
} from "@ant-design/icons";
import { Layout, Button, Dropdown, Avatar } from "antd";
import { useHistory } from "react-router-dom";
import { readToken } from '../util';
const { Header, Sider, Content } = Layout;


function TopHeader({ collapsed, setCollapsed }) {
    const history = useHistory();
    const { username, role: { roleName } } = readToken();
    const items = [
        {
            key: "1",
            label: roleName,
        },
        {
            key: "2",
            danger: true,
            label: "退出登录",
        },
    ];

    const handleMenuClick = ({ key }) => {
        console.log(key);
        if (key === "2") {
            window.localStorage.removeItem("token");
            history.push("/login");
        }
    };

    return (
        <Header style={{ padding: 0, background: "white" }}>
            <Button
                type="text"
                icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
                onClick={() => setCollapsed(!collapsed)}
                style={{
                    fontSize: "16px",
                    width: 64,
                    height: 64,
                }}
            />
            <div style={{ float: 'right' }}>
                欢迎<span style={{ color: "#1890ff" }}>{username}</span>回来
                <Dropdown menu={{ items, onClick: handleMenuClick }}>
                    <Avatar size={40} icon={<UserOutlined />} />
                </Dropdown>
            </div>
        </Header>
    );
}

export default TopHeader;
